<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="yy"><img   class="hh" src="d:\汉堡.png" >
        <p>Yummy hamburger</p>
        <p class="a">wed Mar 26 2025 14:36:14</p>
        <p class="b">GMT+0800(中国标准时间)</p>
        <p class="c">Operating</p>
    </div>
    <div class="progress-two">
        <p class="progress-bar-two">20%</p>
    </div>
    <div style="width: 100%;height: 40px; background-color: blue;">
        <div style="width: 30%;height: 40px;background: green; color: white;text-align: center line-height 40px;"> <P class="progress-bar">20%</P></div>
    </div>
    <ul>
        <li>《</li>
        <li style="background-color: aqua;">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>》</li>
    </ul>
    <style>
        .b{
            font-size: x-small;
            margin-top: -12px;
        }
        .a{
            font-size: x-small;

        }
        .c{
            margin-left: 160px;
            margin-top: -40px;
            font-size: small;
        }
        .yy{
            width: 235px;
            height: 325px;
            border: 25px solid rgb(rgb(12, 11, 11), green, blue);
            background-color: black;
            color: white;
        }
    
        .progress-two{
            background-color: blue;
            width: 100%;
            height: 40px;
        }
        .progress-bar-two{
            width: 60%;
            height: 40px;
            background-color: green;
            color: white;
            text-align: center;
            line-height: 40px;
            animation: progresstwo 2s linear ;
        }
        @keyframes progresstwo{
            0%{
                width: 0%;
            }
            100%{
                width: 60%;
            }
        }
        ul{
            display: flex;
        }
        ul li{
            list-style: none;
            width: 50px;
            height: 50px;
            border: 1px solid white;
            text-align: center;
            line-height: 50px;
        }
        li:hover{
            background-color: green;
        }
    </style>
</body>
</html>